.big{
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    
}


label{
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    
    &:nth-of-type(1){
        border-radius: 0 50% 0 50%;
        background-color: skyblue;
        top:50%;
        left: 50%;
        transform: translate(-300px,-300px);
    }
    &:nth-of-type(2){
        border-radius: 50% 0 50% 0;
        background-color: orange;
        top: 50%;
        left: 50%;
        transform: translate(100px,-300px);
    }
    &:nth-of-type(3){
        border-radius: 50% 0 50% 0;
        background-color: greenyellow;
        top: 50%;
        left: 50%;
        transform: translate(-300px,100px);
    }
    &:nth-of-type(4){
        border-radius: 0 50% 0 50%;
        background-color: yellow;
        top: 50%;
        left: 50%;
        transform: translate(100px,100px);
    }
    &:nth-of-type(5){
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
input{
    z-index: 2;
    position: relative;
    opacity: 0;
}
input:nth-of-type(1):checked~.big{
    background-color: skyblue;
    opacity: 100%;

    
}
input:nth-of-type(1):checked+label{
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-350px, -350px);
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    
}
input:nth-of-type(2):checked~.big{
    background-color: orange;
    opacity: 100%;
    
}
input:nth-of-type(2):checked+label{
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(150px,-350px);
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
input:nth-of-type(3):checked~.big{
    background-color: greenyellow;
    opacity: 100%;
    
}
input:nth-of-type(3):checked+label{
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-350px,150px);
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
input:nth-of-type(4):checked~.big{
    background-color: yellow;
    opacity: 100%;
    
}
input:nth-of-type(4):checked+label{
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(150px,150px);
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
input:nth-of-type(5):checked~.big{
    background-color:pink;
    opacity: 100%;
    
    
}
input:nth-of-type(5):checked+label{
    background-color: white;
    border-radius: 0;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    
}





